<include file="Public/header1" title="专题管理" />

<style type="text/css">
    #vote-edit a, #spec-edit a { display: inline-block;margin-top: 6px; line-height: 34px;}
</style>
<div class="main">
    <div class="wrap">
        <include file="Public/sidebar" active="专题管理" />
        <div class="content">
            <div class="nav">
                <a class="add"><i></i><span>添加专题</span></a>
                <div class="search">
                    <form id="search-form">
                    <input type="text" class="search-inner" name="spec_name" value="{$Think.get.spec_name}">
                    <div class="search-icon" id="search-btn">
                        <i></i>
                    </div>
                    </form>
                </div>
            </div>
            <ul class="topics">
                <foreach name="list" item="val">
                <li class="topic-item">
                    <div class="topic-img">
                         <a href="{:U('details')}?id={$val.id}"><img src="{$val.image_url}" width="100%" alt=""></a>

                    </div>
                    <div class="topic-title">
                        [见微直播]{$val.spec_name}
                    </div>
                    <div class="hover-bg">
                        <div class="control-btn edit" data-id="{$val.id}"><i></i></div>
                        <div class="control-btn delete" data-id="{$val.id}"><i></i></div>
                    </div>
                </li>
                </foreach>
            </ul>
            <div class="controls pagination">
                <!--<a href="javascript:void(0)" class="btn"><i class="left"></i></a>
                <span>2/6</span>
                <a href="javascript:void(0)" class="btn"><i class="right"></i></a>
                <input type="text" name="page" class="btn-bottom page">
                <a href="javascript:void(0)" class="btn-bottom goto">跳转</a>-->
                {$showpage}
            </div>
        </div>
    </div>
</div>
<!--editor models-->
<div id="vote-edit">
    <form id="detailForm" action="{:U('addSpec')}" method="post">
        <div class="newvote-header">
            <div class="header-text">
                专题封面
                <span id="filePicker">选择图片</span>
            </div>
            <div class="newvote-content">
                <div class="img">
                    <div id="fileList" class="upload-image">
                        <!--<img src="" alt="" width="100%" style="display: block">-->
                        <!--<label for="file"><i></i></label>-->
                    </div>
                    <!--用来存放item-->
                    <!--<div id="filePicker">选择图片</div>-->
                    <input type="hidden" name="image_url" id="image_url" value="" />
                </div>
                <div class="select-department">
                    <span>专题归属</span>
                    <select name="channel_id">
                        <option value="">--选择部门--</option>
                        <volist name="channel_list" id="channel">
                            <option value="{$channel['chid']}">{$channel['name']}</option>
                        </volist>
                    </select>
                </div>
                <div class="vote-describe">
                    <span>专题标题</span>
                    <input type="text" name="spec_name" placeholder="请输入专题标题">
                </div>
            </div>
        </div>
        <div class="newvote-footer">
            <a class="btn btn-primary submit" data-isimage="0">完成</a>
            <a class="btn btn-default cancel">取消</a>
        </div>
    </form>
</div>

<!--editor models-->
<div id="spec-edit" class="spec-edit">
    <form id="editDetailForm" action="{:U('editSpec')}" method="post">
    <input type="hidden" name="id" value="0">
        <div class="newvote-header">
            <div class="header-text">
                专题封面
                <span id="filePicker2">选择图片</span>
            </div>
            <div class="newvote-content">
                <div class="img">
                    <div id="fileList2" class="upload-image">
                        <!--<img src="" alt="" width="100%" style="display: block">-->
                        <!--<label for="file"><i></i></label>-->
                     </div>
                    <!--用来存放item-->
                    <!--<div id="filePicker">选择图片</div>-->
                    <input type="hidden" name="image_url" id="image_url2" value="" />
                </div>
                <div class="select-department">
                    <span>选择专题所属部门：</span>
                    <select name="channel_id">
                        <option value="">--选择部门--</option>
                        <volist name="channel_list" id="channel">
                            <option value="{$channel['chid']}">{$channel['name']}</option>
                        </volist>
                    </select>
                </div>

                <div class="vote-describe">
                    <span>专题标题</span>
                    <input type="text" name="spec_name" id="spec_name" placeholder="请输入专题标题">
                </div>
            </div>
        </div>
        <div class="newvote-footer">
            <a class="btn btn-primary edit-submit" data-isimage="0">完成</a>
            <a class="btn btn-default edit-cancel">取消</a>
        </div>
    </form>
</div>

<div id="mask" unselectable="on"></div>
<script>
    var uploader, status = 0;
    $(function(){
        $("#checkAll").click(function(){
            if($(this).is(":checked")){
                $(".checkAll").find('input').prop("checked",true);
            }else{
                $(".checkAll").find('input').prop("checked",false);
            }
        });

        $(".topic-title").ellipsis({
            row: 2
        });

        //添加按钮
        $(".add").click(function () {
            $("#vote-edit").css("visibility","visible").addClass("on");
            $("#mask").show();
            status = 0;
            setTimeout("imagePic('#filePicker')",500);
        });

        //取消编辑
        $("#mask,.newvote-footer .cancel").click(function () {
            $("#vote-edit").removeClass('on');
            $("#spec-edit").removeClass('on');
            $("#mask").hide();
            //删除输入框内容
            $("#fileList").empty();
            $(".vote-describe input").val("");
            delete window;
        });

        //取消编辑
        $(".edit-cancel").click(function () {
            $(".spec-edit").removeClass('on');
            $("#mask").hide();
            //删除输入框内容
            $("#fileList").empty();
            $(".vote-describe input").val("");
            delete window;
        });

        $(document).on("click",".submit",function(){
            $("#vote-edit").removeClass('on');
            $("#mask").hide();
//            $("#fileList").empty();
            uploader.upload();
            if($('.submit').data('isimage') == 1) {
                // uploader.upload();
 
            } else {
                $("#detailForm").submit();
            }
//            delete window;
        });

        $(document).on("click",".edit-submit",function(){
            $(".spec-edit").removeClass('on');
            $("#mask").hide();
//            $("#fileList").empty();
            if($('.edit-submit').data('isimage') == 1) {
                uploader.upload();
 
            } else {
                $("#editDetailForm").submit();
            }
            
//            delete window;
        });

        $(document).on("click",".edit",function(){
            $(".spec-edit").css("visibility","visible").addClass("on");
            $("#mask").show();
            status = 1;
            setTimeout("imagePic('#filePicker2')",500);
            $.get('{:U("ajaxGetSpec")}?id=' + $(this).data('id'), function (info) {
                var info = $.parseJSON(info);
                if(info.code == 0) {
                    if(info.info.image_url) {
                        $("#editDetailForm .upload-image").html('<img src="' + info.info.image_url + '" width="400" heigth="200" />');
                    }
                    $("#editDetailForm #spec_name").val(info.info.spec_name);
                    $("#editDetailForm [name=id]").val(info.info.id);
                    $("#editDetailForm [name=channel_id]").val(info.info.channel_id);
                }

            })
        });
    });

    function imagePic(id) {
        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: false,

            // swf文件路径
            swf: 'http://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',

            // 文件接收服务端。
            server: 'http://upload.qiniu.com',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: id,

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            formData:{
                token : "{$uploadToken}",
            },
        });

        uploader.on('beforeFileQueued',function(){
            if(status == 1) {
                $(".edit-submit").data('isimage',1); 
            } else {
                 $(".submit").data('isimage',1); 
            }
            uploader.reset();
        })

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            if(file.size<100){
                alert("请重新选择图片！！");
                $("#fileList").empty();
                return;
            }
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                                //'<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');


            // $list为容器jQuery实例
            if(status == 1) {
                $("#fileList2").empty();
                $("#fileList2").append( $li );                
            } else {

                $("#fileList").empty();
                $("#fileList").append( $li );        
            }


            thumbnailWidth = 440;
            thumbnailHeight = 250;
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        uploader.on( 'uploadSuccess', function( file ,response ) {
            $( '#'+file.id ).addClass('upload-state-done');
            if(status == 1) {
                $("#image_url2").val('http://image.jianweitv.com/'+response.key);
                $("#editDetailForm").submit();
            } else {
                $("#image_url").val('http://image.jianweitv.com/'+response.key)
                $("#detailForm").submit();
            }
            // console.log(response); 

        });


    }

    $('.delete').on('click', function () {
        var _this = this;
        if(confirm('您确定删除此专题吗?')) {
            $.post('{:U("delSpecial")}', {id:$(this).data('id')}, function (data) {
                if(data.status == 1) {
                    console.log();
                    $(_this).parents('li.topic-item').remove();
                } else {
                    alert(data.info);
                }
            })
        }
    })

    $('#search-btn').click(function () {
        $("#search-form").submit();
    });
</script>
</body>
</html>